<template>
  <div class="receive-address">
    <div class="top-title">
      付款方式
    </div>
    <div class="container">
      <div>
        <div class="preparation" @click="addPayWay">
          <a-icon class="icon" type="plus" />
          <span class="preparation-text">新增付款方式</span>
        </div>
        <div class="top-msg">如已加入集团，可选择集团配置的统一付款方式<span></span></div>
      </div>
      <div class="container-card">
        <div class="title-row">
          <div class="title-row-left">
            <span>付款方式名称：{{'协议支付'}}</span>
            <span>创建方：{{'永达集团'}}</span>
            <span>付款方式类型：{{'账期支付'}}</span>
          </div>
          <div class="title-row-right">
            <span v-if="!activeFlag" :class="[!activeFlag?'active':'']" class="default">
              <span class="click-style">设为默认</span>
            </span>
            <span class="edit" :class="[!activeFlag?'active':'']">
              <span class="click-style">
                <strong></strong>
                <i>编辑</i>
              </span>
            </span>
          </div>
        </div>
        <div class="content-row">
          <p><span class="bot-title">发票要求：</span>增值税发票(不限开具方)</p>
          <p><span class="bot-title">对账时间：</span>商品收货后“<strong>次月5号</strong>”对账,完成对账后供应商开票</p>
          <p><span class="bot-title">付款时间：</span>收到发票“<strong>90天</strong>”付款</p>
        </div>
      </div>
      <div class="container-card">
        <div class="title-row">
          <div class="title-row-left">
            <span>付款方式名称：{{'协议支付'}}</span>
            <span>创建方：{{'永达集团'}}</span>
            <span>付款方式类型：{{'账期支付'}}</span>
          </div>
          <div class="title-row-right">
            <span v-if="!activeFlag1" :class="[!activeFlag1?'active':'']" class="default">
              <span class="click-style">设为默认</span>
            </span>
            <span class="edit" :class="[!activeFlag1?'active':'']">
              <span class="click-style">
                <strong></strong>
                <i>编辑</i>
              </span>
            </span>
          </div>
        </div>
        <div class="content-row">
          <p><span class="bot-title">发票要求：</span>增值税发票(不限开具方)</p>
          <p><span class="bot-title">对账时间：</span>商品收货后“<strong>次月5号</strong>”对账,完成对账后供应商开票</p>
          <p><span class="bot-title">付款时间：</span>收到发票“<strong>90天</strong>”付款</p>
        </div>
      </div>
    </div>

    <pay-way-modal :visible.sync="modalFlag" />
  </div>
</template>

<script>
import PayWayModal from './components/payWayModal'

export default {
  components:{PayWayModal},
  data() {
    return {
      activeFlag: false,
      activeFlag1: true,
      modalFlag: false
    }
  },
  methods: {
    addPayWay() {
      //新增付款方式
      this.modalFlag = true
    }
  },
}
</script>
<style lang="less">
i,p {
  font-style: normal;
  margin: 0;
  padding: 0;
}
.receive-address {
  .top-title {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding-left: 24px;
    color: @newColorGreyFontM;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
  }
  .container {
    background: #fff;
    margin: 16px;
    width: calc(100% - 32px);
    min-height: 800px;
    padding: 24px;
    overflow: hidden;
  }
  .preparation {
    display: inline-block;
    width: 120px;
    height: 32px;
    line-height: 32px;
    background: @activeRed;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    .icon{
      width: 16px;
      height: 16px;
    }
    .preparation-text{
      font-size: 12px;
      vertical-align: middle;
      margin-left: 8px;
    }
  }
  .top-msg {
    position: relative;
    display: inline-block;
    margin-left: 13px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: rgba(39,36,36,0.60);
    padding: 0 12px;
    background-color: rgba(255,144,3,0.08);
    border-radius: 2px;
    // box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.06);
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ff9003;
    span {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(-100%,-50%);
      width: 0px;
      height: 0px;
      border-right: 5px solid rgba(255,144,3,0.07);
      border-top: 4px solid transparent;
      border-left: 5px solid transparent;
      border-bottom: 4px solid transparent;
    }
  }
  .container-card {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.06); 
    color: @newColorGreyFontM;
    font-size: 12px;
    margin-top: 16px;
    .content-row {
      padding: 21px 24px 20px 24px;
    }
    .click-style {
      cursor: pointer;
    }
    .title-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: @newColorGreyFontM;
      padding: 15px 24px;
      background: #f9f9f9;
      border-radius: 4px 4px 0px 0px;
    }
    .title-row-left {
      width: 80%;
      span {
        border-right: 1px solid rgba(61,61,78,0.08);
        margin-left: 14px;
        padding-right: 14px;
      }
      span:first-child{
        margin-left: 0;
      }
      span:last-child {
        padding-right: 0;
        border-right: none;
      }
    }
    .title-row-right {
      width: 20%;
      text-align: right;
      span {
        color: @activeRed;
      }
      span.default.active {
        border-right: 1px solid rgba(61,61,78,0.08);
        padding-right: 16px;
      }
      span.edit {
        strong {
          width: 14px;
          height: 14px;
          display: inline-block;
          background: url('../../../assets/image/tenantCenter/editicon.png') center no-repeat;
          background-size: 14px 14px;
          vertical-align: middle;
          margin-right: 6px;
          margin-top: -2px;
        }
      }
      span.edit.active {
        padding-left: 16px;
      }
    }
    p {
      height: 24px;
    }
    span.bot-title {
      color: rgba(39,36,36,0.6);
      display: inline-block;
    }
    strong {
      font-family: PingFangSC, PingFangSC-Regular;
      color: #FF9003;
      font-weight: 400;
    }
  }
}
</style>